<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
		<script src="../js/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- <router-link to="/login">登录</router-link> -->
			<router-view></router-view>
		</div>
		<template id="t1">
			<div>
				用户名：<input type="text" placeholder="请输入用户名" /> <br />
				密 码： <input type="text" placeholder="请输入密码" /> <br />
				<button @click="login">登录</button>
			</div>
		</template>

		<template id="t2">
			<div>
				<h3>首页列表页面</h3>
			</div>
		</template>

		<template id="t3">
			<div>
				id:<input type="text" /> <br />
				name:<input type="text" />
			</div>
		</template>
		<script>
			var routes = [{
					path: '/',
					meta:'lnckb',
					redirect: '/login'
				},
				{
					path: '/login',
					component: {
						template: "#t1",
						methods: {
							login() {
								var token = sessionStorage.setItem('token', 'jkscsjvc123456');
								router.push({
									path: '/home'
								})
							}
						}


					}
				},
				{
					path: '/home',
					component: {
						template: "#t2"
					}
				},
				{
					path: '/goods',
					component: {
						template: "#t3",
						beforeRouteLeave(to, from, next) {
							const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
							if (answer) {
								next()
							} else {
								next(false)
							}
						}
					}
				}
			]

			var router = new VueRouter({
				routes
			})

			router.beforeEach((to, from, next) => {
				var token = sessionStorage.getItem('token');

				if (to.path == '/home') {
					if (token) {
						next()
					} else {
						next('/login')
					}
				} else {
					next()
				}

			})


			var vm = new Vue({
				el: "#app",
				data: {

				},
				router
			})
		</script>
	</body>
</html>
